<template>
  <div>
    <el-form class="p-form" ref="form" :model="form" label-position="left" label-width="180px">
      <el-form-item label="区域">
        <el-select size="small" class="w233" v-model="form.field1" placeholder="请选择区域">
          <el-option v-for="(item) in option" :key="item.label" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="防火墙名称">
        <el-input class="w233" v-model="form .field2" placeholder="请输入"></el-input>
      </el-form-item>
      <fbr></fbr>
      <el-form-item label="防护VPC间流量峰值">
        <el-input-number size="small" style="width:215px" v-model="form.field3" :min="1"></el-input-number>Mbps
      </el-form-item>
      <el-form-item label="防护VPC数">
        <el-input-number size="small" style="width:215px" v-model="form.field4" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="日志审计存储天数">
        <el-input-number size="small" style="width:215px" v-model="form.field5" :min="1"></el-input-number>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        hasTag: false,
        form: {
          field1: '',
          field2: '',
          field3: '',
          field4: '',
          field5: '',
          field6: '',
          field7: '',
        },
        checkList1: [],
        checkList2: [],
        option: [
          {label: '东南中心', value: '东南中心'},
          {label: '南方中心', value: '南方中心'},
          {label: '北方中心', value: '北方中心'},
        ],
        radio1: null,
        radio2: null,
      }
    },
    methods: {
      init() {},
      getFormData() {
        return JSON.parse(JSON.stringify(this.form))
      },
      delTag() {
        this.hasTag = false
        this.form.tagKey = ''
        this.form.tagVal = ''
      },
      usabelChange(val) {
        this.form.pcClass = ''
        this.form.pcType = ''
      },
      radio1Change(val) {
        if (val) {
          this.checkList1 = ["周一","周二","显示一周七天复选"]
        } else {
          this.checkList1 = []
        }
      },
      radio2Change(val) {
        console.log(val)
        if (val === '全选按钮') {
          this.checkList2 = ["00:00","01:00","显示一天24小时整点的复选"]
        } else {
          this.checkList2 = []
        }
      }
    }

  }
</script>

<style scoped lang="less">
  .p-form {
    /deep/.el-form-item__label {
      font-size: 16px;
      font-family: 'PingFang SC ', 'PingFang SC';
      font-weight: 650;
      font-style: normal;
      color: rgba(0, 0, 0, 0.847058823529412);
    }
  }

  .addnum {
    display: flex;

    .explain {
      margin-left: 10px;
      line-height: 50px;
      font-size: 12px;
      color: #AAAAAA;
    }
  }

  .form-br {
    height: 1px;
    background-color: #ebebeb;
    width: 100%;
    margin-bottom: 15px;
  }

  .role-desbox {
    width: 932px;
    min-height: 125px;

    .escplasin {
      margin-left: 10px;
      font-size: 12px;
      color: #AAAAAA;
    }

    .esclist {
      height: 50px;
      display: flex;
      align-items: center;

      div {
        color: #333333;
        width: 160px;
        text-align: center;
      }
    }

    .esclist-t {
      height: 35px;
      background-color: rgba(242, 242, 242, 1);
    }

  }

  .tag-btn {
    margin-right: 15px;
    height: 22px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    border: 1px #1890FF solid;
    border-radius: 50%;
    color: #1890FF;

    &:hover {
      background-color: #1890FF;
      color: #ffffff;
    }
  }

  /deep/.el-radio-button {

    border-radius: 4px;
    overflow: hidden;
  }

  /deep/.el-radio-button {
    .el-radio-button__inner {
      background-color: rgba(188, 223, 255, 1);
      color: #716E6E;
      font-size: 16px;
    }

    &.is-active {
      .el-radio-button__inner {
        background-color: #1890FF;
        color: #ffffff;

      }
    }
  }

  .pcarea3 {
    font-size: 12px;
    color: #FF3636;
  }
</style>
